<template>
  <view class="region-main" @touchmove.prevent>
    <view class="selection-wrapper">
      <view class="part1">
        <view class="select1-wrapper">
          <view
            class="region1-item"
            :class="part1ActiveIndex === 0 ? 'region1-item-active' : ''"
            @click="setPart1ActiveIndex(0)"
          >
            区域
          </view>
          <view
            class="region1-item"
            @click="setPart1ActiveIndex(1)"
            :class="part1ActiveIndex === 1 ? 'region1-item-active' : ''"
          >
            地铁
          </view>
        </view>
      </view>

      <view class="district-part2" v-show="part1ActiveIndex === 0">
        <scroll-view scroll-y="true" class="scroll_view">
          <view
            class="district-item"
            v-for="item in districtList"
            :class="selectedAreas[0].id === item.id ? 'itemActiveText' : ''"
            @click="setActiveDistrict(item)"
            :key="item.id"
          >
            {{ item.name }}
          </view>
        </scroll-view>
      </view>

      <view class="part2" v-show="part1ActiveIndex === 1">
        <scroll-view scroll-y="true" class="scroll_view">
          <view
            class="region2-item"
            v-for="item in gdLineList"
            :key="item.line_id"
            :class="
              selectedGdLine[0].line_id === item.line_id ? 'itemActiveText' : ''
            "
            @click="setActiveGdLine(item)"
          >
            {{ item.line_name }}
          </view>
        </scroll-view>
      </view>
      <view
        class="part3"
        v-show="part1ActiveIndex === 1 && selectedGdLine[0].line_id !== -1"
      >
        <scroll-view scroll-y="true" style="height: 160px">
          <checkbox-group @change="checkboxChange">
            <label
              class="station-item"
              v-for="station in stationsOfGdLine[activeLine.line_name]"
              :key="station.station_id"
              :style="selectedStations.includes(station.station_id.toString()) ? 'background-color: whitesmoke':'' "
            >
              
              <view class="text">{{ station.station_name }}</view>

              <view>
                <checkbox
                 
                  style="transform: scale(0.5)"
                  :chekced="station.checked"
                  :value="station.station_id.toString()"
                />
              </view>
            </label>
          </checkbox-group>

          <!--          <uni-data-checkbox-->
          <!--            class="data-checkbox"-->
          <!--            v-model="selectedStations"-->
          <!--            :localdata="checkGroupOptions"-->
          <!--            multiple-->
          <!--          >-->
          <!--          </uni-data-checkbox>-->
        </scroll-view>
      </view>
    </view>

    <view class="buttons-wrapper">
      <button class="blue-wide-button grey-button button" @click="reset">
        清空
      </button>
      <button class="blue-wide-button button" @click="confirm">确定</button>
    </view>
  </view>
</template>

<script>
import { MY_LOCATION } from '../../util/misc';
import { uniRequest } from '../../util/network';
import { TESTING } from '@/util/test';

export default {
  data() {
    return {
      part1ActiveIndex: TESTING ? 1 : 0, // 0 区域, 1 地铁
      part2ActiveIndex: 0,
      address: {
        city: '',
        district: '',
      },
      districtList: [{ id: -1, parent_id: '-1', name: '不限' }],

      gdLineList: [{ line_id: -1, parent_id: '-1', line_name: '不限' }],
      selectedAreas: [{ id: -1, parent_id: '-1', name: '不限' }],
      selectedGdLine: [{ line_id: -1, parent_id: '-1', line_name: '不限' }],
      selectedStations: [], // 存入station.id, (而不是station.station_id)
      stationsOfGdLine: { none: [] },
      activeLine: { line_name: 'none', gd_line_id: 0 },
    };
  },
  methods: {
    checkboxChange(e) {
      // console.log(e);
      this.selectedStations = e.detail.value;
    },

    reset() {
      this.selectedAreas = [{ id: -1, parent_id: '-1', name: '不限' }];
      // 重设 active的轨道线
      this.setActiveGdLine({ line_id: -1, parent_id: '-1', line_name: '不限' });
    },
    confirm() {
      // 返回所有选择了的数据
      let res = {
        area:
          this.selectedAreas[0].name === '不限'
            ? []
            : [this.selectedAreas[0].name],
        gd_line_id:
          this.activeLine.line_id === -1 ? null : this.activeLine.line_id,
        gd_station_id: this.selectedStations,
      };
      this.$emit('confirm', res);
      // this.reset()
    },
    // 设置active的轨道线
    setActiveGdLine(newItem) {
      // console.log(newItem);

      this.selectedGdLine = [newItem];
      // 清空已经选择过的站点
      this.selectedStations = [];
      let exist = this.stationsOfGdLine.hasOwnProperty(newItem.line_name);
      if (!exist) {
       
        uniRequest('/gd_station', { line_id: newItem.line_id }, {
          success: ({ data }) => {
            this.stationsOfGdLine[newItem.line_name] = data.data;
            for (
              let i = 0;
              i < this.stationsOfGdLine[newItem.line_name].length;
              i++
            ) {
              this.$set(
                this.stationsOfGdLine[newItem.line_name][i],
                'checked',
                false
              );
            }
            // console.log(this.stationsOfGdLine);
            this.activeLine = newItem;

            // console.log(this.stationsOfGdLine[0]);
            // console.log(this.activeLine.line_name);
            // console.log(this.stationsOfGdLine[this.activeLine.line_name]);
          },
        })
      } else {
        this.activeLine = newItem;
      }
    },
    setActiveDistrict(item) {
      this.selectedAreas = [item];
    },
    setPart1ActiveIndex(val) {
      this.reset();
      this.part1ActiveIndex = val;
    },
    initData() {
      // 获取区域: 宝安区, 南山区等
      uniRequest(
        '/city_area',
        { city: this.address.city },
        {
          success: ({ data }) => {
            this.districtList = this.districtList.concat(data.data);
          },
        }
      );

      //  获取轨道
      uniRequest(
        '/gd_line',
        { city: this.address.city },
        {
          success: ({ data }) => {
            // console.log('轨道: ',data.data)
            let line = (data.data[0] && data.data[0].line) || [];
            this.gdLineList = this.gdLineList.concat(line);
          },
        }
      );
    },
  },
  computed: {
    checkGroupOptions() {
      return [
        { value: 'bj', text: '北京' },
        { value: 'sh', text: '上海' },
        { value: 'gz', text: '广州' },
      ];
    },
  },
  mounted() {
    this.address = uni.getStorageSync(MY_LOCATION);
    this.initData();
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
@import './common';

.region-main {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #969799;
  width: 100vw;
  height: 57vw;
  overflow: hidden;
  background-color: #f7f8fa;

  .selection-wrapper {
    display: flex;
    height: 160px;
    @include borderBox;

    .part1 {
      width: 26vw;
      padding: 0;
      .select1-wrapper {
        height: 160px;
        @include borderBox;
        background-color: #f7f8fa;

        .region1-item {
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: #f7f8fa;
          border-bottom: 1px solid $greyBorderColor;
          @include borderBox;
        }

        .region1-item-active {
          background-color: #ffffff;
        }
      }
    }

    .itemActiveText {
      color: #004fbf;
      background-color: rgba(0, 0, 0, 0.02) !important;
    }

    .district-part2 {
      width: 74vw;
      background-color: #ebedf0;

      .scroll_view {
        height: 160px;

        .district-item {
          @include ellipsis;
          height: 40px;
          @include center;
          justify-content: flex-start;
          padding-left: 6vw;
          border-top: 1px solid #e0e5ed;

          &:active {
            background-color: #d8d9dc;
          }
        }
      }
    }

    .part2 {
      width: 28vw;

      .scroll_view {
        height: 160px;
        /*background-color: red;*/
        .region2-item {
          @include borderBox;
          height: 80rpx;
          line-height: 40px;
          text-align: center;
          background-color: #ebedf0;
          border-top: 1px solid #e0e5ed;
          @include ellipsis;

          &:active {
            background-color: #d8d9dc;
          }
        }
      }
    }

    .part3 {
      width: 46vw;

      .station-item {
        @include borderBox;
        border-bottom: 2rpx solid whitesmoke;
        height: 80rpx;

        line-height: 40px;
        text-align: center;
        background-color: #ffffff;
        @include center;
        @include ellipsis;

        .text {
          margin-right: 5px;
        }

        &:active {
          background-color: $activeSelectGreyColor;
        }
      }
    }
  }

  .buttons-wrapper {
    margin-top: 2px;
    width: 100vw;
    background-color: white;
    padding-left: 3vw;
    padding-right: 3vw;
  }
}
</style>
